<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Sunshine MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="/static/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="/static/./css/app.css"/>
</head>

<body>
<!--<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">下方悬浮标题</h1>
</header>-->
<div class="mui-content">

    <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="{:url('Article/articleInfo','id='.$hots[0]['id'])}">
                    <img src="{$hots[0]['image']}">
                    <p class="mui-slider-title">{$hots[0]['title']}</p>
                </a>
            </div>

            {volist name="hots" id="vo"}
            <div class="mui-slider-item">
                <a href="{:url('Article/articleInfo','id='.$vo.id)}">
                    <img src="{$vo.image}">
                    <p class="mui-slider-title">{$vo.title}</p>
                </a>
            </div>
            {/volist}

            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="{:url('Article/articleInfo','id='.$hots[0]['id'])}">
                    <img src="{$hots[0]['image']}">
                    <p class="mui-slider-title">{$hots[0]['title']}</p>
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator mui-text-right">
            {volist name="hots" id="vo"}
            <?php  if ($key == 0){ ?>
            <div class="mui-indicator mui-active"></div>
            <?php }else{ ?>
            <div class="mui-indicator"></div>
            <?php } ?>
            {/volist}
        </div>
    </div>



    <ul class="mui-table-view">

        {volist name="news" id="vo"}
        <li class="mui-table-view-cell mui-media">
            <a href="{:url('Article/articleInfo','id='.$vo.id)}">
                <?php if ($vo['image']==""){ ?>
                <img class="mui-media-object mui-pull-left" src="/static/images/logo.png">
                <?php }else{ ?>
                <img class="mui-media-object mui-pull-left" src="{$vo.image}">
                <?php }?>

                <div class="mui-media-body">
                    {$vo.title}
                    <p class='mui-ellipsis'>{$vo.description}</p>
                </div>
            </a>
        </li>
        {/volist}



    <ul>






</div>
</body>
<script src="/static/./js/mui.min.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    var slider = mui("#slider");
    slider.slider({
        interval: 5000
    });
</script>
</html>